<template>
    <div class="right-tools-bar-container">
        <template v-for="item in renderTools">
            <div
                v-if="item"
                :key="item.code"
                class="tools-item"
                :class="{
                    active: globalStore.currentTool === item.code || activeCode2 === item.code,
                }"
                @click="onClickTool(item)"
            >
                <SvgIcon
                    size="32px"
                    :color="
                        globalStore.currentTool === item.code || activeCode2 === item.code
                            ? '#fff'
                            : 'rgba(16, 208, 160, 1)'
                    "
                    :name="item.icon"
                />
            </div>
        </template>
    </div>
</template>

<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue'
import { resetMapView, zoom2Big, zoom2Small, switch23D } from '@/utils/map-tools'
import { useGlobalStore } from '@/store/global'

// props 定义
const props = withDefaults(
    defineProps<{
        defaultTools?: string[]
        dynamicTools?: string[]
    }>(),
    {
        defaultTools: () => ['increase', 'minish', 'init', '23D'],
        dynamicTools: () => ['map', 'camera', 'layer', 'uav', 'common', 'robot'],
    },
)

// 全局状态
const globalStore = useGlobalStore()

// 所有的工具
const allTools = ref([
    // 增大地图的zoom层级
    {
        icon: 'tools-increase',
        code: 'increase',
        hasActive: false,
        hasPanel: false,
    },
    // 缩小地图的zoom层级
    {
        icon: 'tools-minish',
        code: 'minish',
        hasActive: false,
        hasPanel: false,
    },
    // 回到地图初始化的位置和视角
    {
        icon: 'tools-init',
        code: 'init',
        hasActive: false,
        hasPanel: false,
    },
    // 切换2维或者3维
    {
        icon: 'tools-2d',
        code: '23D',
        hasActive: false,
        hasPanel: false,
    },
    // 地图图层
    {
        icon: 'tools-map',
        code: 'map',
        hasActive: true,
        hasPanel: true,
    },
    // 摄像头
    {
        icon: 'tools-camera',
        code: 'camera',
        hasActive: true,
        hasPanel: true,
    },
    // 图层
    {
        icon: 'tools-layer',
        code: 'layer',
        hasActive: true,
        hasPanel: true,
    },
    // 无人机
    {
        icon: 'tools-uav',
        code: 'uav',
        hasActive: true,
        hasPanel: true,
    },
    // 通用
    {
        icon: 'tools-common',
        code: 'common',
        hasActive: true,
        hasPanel: true,
    },
    // 机器人
    {
        icon: 'tools-robot',
        code: 'robot',
        hasActive: true,
        hasPanel: true,
    },
])

// 需要展示的工具
const renderTools = computed(() => {
    return [...props.defaultTools, ...props.dynamicTools].map(code => {
        const tool = allTools.value.find(c => c.code === code)
        if (tool) {
            return tool
        }
        return null
    })
})

// =========
// 存在active状态且存在面板的工具，存在扩展面板时，多个面板会互相遮挡位置，所以同时只能存在一个此状态的工具
// globalStore.currentTool

// 存在active状态 不存在扩展面板的工具， 如风场功能，active状态仅表示这个功能开启了
const activeCode2 = ref('')
// 这两个状态不相关
// =========

// 点击工具
const onClickTool = (toolInfo: any) => {
    if (toolInfo.code === 'increase') {
        zoom2Big()
    } else if (toolInfo.code === 'minish') {
        zoom2Small()
    } else if (toolInfo.code === 'init') {
        resetMapView()
        const targetTool = allTools.value.find(c => c.code === '23D')
        targetTool && (targetTool.icon = 'tools-3d')
    } else if (toolInfo.code === '23D') {
        const targetTool = allTools.value.find(c => c.code === toolInfo.code)
        if (toolInfo.icon === 'tools-2d') {
            targetTool && (targetTool.icon = 'tools-3d')
            switch23D('3d')
        } else {
            targetTool && (targetTool.icon = 'tools-2d')
            switch23D('2d')
        }
    } else {
        // 存在active & 面板的工具
        if (toolInfo.hasActive && toolInfo.hasPanel) {
            globalStore.changeCurrentTool(
                globalStore.currentTool === toolInfo.code ? '' : toolInfo.code,
            )
        }

        // 存在active & 不存在面板的工具
        if (toolInfo.hasActive && !toolInfo.hasPanel) {
            activeCode2.value = activeCode2.value === toolInfo.code ? '' : toolInfo.code
            // do
        }
    }
}
</script>

<style lang="scss" scoped>
.right-tools-bar-container {
    position: absolute;
    top: 160px;
    right: 940px;
    z-index: 5;
    width: 56px;
    min-height: 260px;
    background: rgba(0, 29, 33, 0.5);
    border: 1px solid rgba(16, 208, 160, 1);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 0;
    gap: 4px;

    .tools-box {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        justify-content: flex-start;
        padding: 24px 0;
    }

    .tools-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        cursor: pointer;

        &.active {
            background-color: rgba(16, 208, 160, 1);
            border-radius: 4px;
        }
    }
}
</style>
